{{--
/**
 * Created by PhpStrom
 * User: 郭碧云
 * Date: 2021/7/12 9:04
 * Desc:
 */
--}}
@extends("layout.admin")

@section("title")
    编辑试题
@endsection

@section("content")
    {{--修改样式--}}
    <style>
        .layui-input-width {
            width: 50% !important;
        }

        .layui-treeSelect {
            width: 29% !important;
        }

        .layui-form-switch {
            border-radius: 6px !important;
        }

        .layui-form-select .layui-unselect {
            color: #999999;
        }
    </style>

    {{--修改--}}
    <form id="update_from" action="{{route('admin.question.update',['id'=>$info['id']])}}" method="POST"
          style="margin-top: 15px;"
          class="layui-form">
        {{csrf_field()}}
        <div class="layui-form-item">
            <label class="layui-form-label">题型</label>
            <div class="layui-input-block">
                <div id="type" style="width: 50%"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">组织机构</label>
            <div class="layui-input-block">
                <div id="org" style="width: 50%"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">科目</label>
            <div class="layui-input-block">
                <div id="category" style="width: 50%"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择版本</label>
            <div class="layui-input-block">
                <div id="version" style="width: 50%"></div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-block">
                <div id="tag_id" class="layui-inline" style="width: 50%"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">题干</label>
            <div class="layui-input-block">
                <textarea id="question" name="data[question]">{{$info["question"]}}</textarea>
                <p style="color: red">填空用____表示</p>
            </div>
        </div>

        {{--客观题显示--}}
        <div id="objective"
             style="display: @if($info["type"]["choice_type"]>=1&&$info["type"]["choice_type"]<4) block @else none @endif">
            @if($info["type"]["choice_type"]>=1&&$info["type"]["choice_type"]<4)
                @foreach($info["content"]["answer"] as $k=>$answer)
                    <div class="obj-item">
                        <div class="layui-form-item F{{strtoupper(chr($k+1+64))}}">
                            <label class="layui-form-label">选项 {{strtoupper(chr($k+1+64))}}</label>
                            <div class="layui-input-block">
                                <textarea id="{{strtoupper(chr($k+1+64))}}"
                                          name="data[content][{{strtoupper(chr($k+1+64))}}]">{{$answer["option"]}}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item answerAlone F{{strtoupper(chr($k+1+64))}}"
                             style="display: @if($info["type"]["choice_type"]==1) block @else none @endif">
                            <label class="layui-form-label">正确答案</label>
                            <div class="layui-input-block">
                                <input type="radio" name="data[oneAnswer]"
                                       @if(($info["type"]["choice_type"]==1)&&array_key_exists('flag',$answer)) checked
                                       @endif value="{{strtoupper(chr($k+1+64))}}" title="{{strtoupper(chr($k+1+64))}}">
                            </div>
                        </div>
                        <div class="layui-form-item answerMore F{{strtoupper(chr($k+1+64))}}"
                             style="display: @if($info["type"]["choice_type"]==2||$info["type"]["choice_type"]==3) block @else none @endif">
                            <label class="layui-form-label">正确答案</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="data[moreAnswer][]"
                                       @if($info["type"]["choice_type"]>1&&$info["type"]["choice_type"]<4&&array_key_exists('flag',$info["content"]["answer"][$loop->index])) checked
                                       @endif value="{{strtoupper(chr($k+1+64))}}" title="{{strtoupper(chr($k+1+64))}}"
                                       lay-skin="primary">
                            </div>
                        </div>
                        <div style="position: absolute;left: 71%;margin-top: -99px;">
                            @if((count($info["content"]["answer"])-1)==$loop->index)
                                <a id="add" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit=""
                                   lay-filter="add">添加</a>
                            @endif
                            <a id="del" class="layui-btn layui-btn-sm layui-btn-danger keguandel" lay-submit=""
                               lay-filter="del">删除</a>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="obj-item">
                    <div class="layui-form-item FA">
                        <label class="layui-form-label">选项 A</label>
                        <div class="layui-input-block">
                            <textarea id="A" name="data[content][A]"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item answerAlone FA">
                        <label class="layui-form-label">正确答案</label>
                        <div class="layui-input-block">
                            <input type="radio" name="data[oneAnswer]" value="A" title="A">
                        </div>
                    </div>
                    <div class="layui-form-item answerMore FA">
                        <label class="layui-form-label">正确答案</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="data[moreAnswer][]" value="A" title="A" lay-skin="primary">
                        </div>
                    </div>
                    <div style="position: absolute;left: 71%;margin-top: -99px;">
                        <a id="add" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit=""
                           lay-filter="add">添加</a>
                        <a id="del" class="layui-btn layui-btn-sm layui-btn-danger keguandel" lay-submit=""
                           lay-filter="del">删除</a>
                    </div>
                </div>
            @endif
        </div>

        {{--判断题--}}
        <div id="evaluate" style="display:@if($info["type"]["choice_type"]==4) block @else none @endif">
            <div class="layui-form-item">
                <label class="layui-form-label">答案</label>
                <div class="layui-input-block">
                    <input type="radio" name="data[objective]" value="1"
                           @if($info["type"]["choice_type"]==4&&$info["content"]["answer"]["objective"]==1) checked
                           @endif title="对">
                    <input type="radio" name="data[objective]" value="0"
                           @if($info["type"]["choice_type"]==4&&$info["content"]["answer"]["objective"]==0) checked
                           @endif title="错">
                </div>
            </div>
        </div>
        {{--定值填空显示--}}
        <div class="layui-form-item" id="directional"
             style="display: @if($info["type"]["choice_type"]==5) block @else none @endif">
            <label class="layui-form-label">定向值答案</label>
            <div class="layui-input-block" style="width: 61.7%">
                <input type="text" name="data[directionalAnswer]" autocomplete="off" placeholder="名称"
                       class="layui-input"
                       value="@if($info["type"]["choice_type"]==5){{$info["content"]["answer"][0]}}@endif">
                <p style="color: red">多个答案请用==隔开</p>
            </div>
        </div>

        {{--问答题,题型为填空，简答显示--}}
        <div class="layui-form-item" id="ask"
             style="display: @if($info["type"]["choice_type"]==0) block @else none @endif">
            <label class="layui-form-label">答案</label>
            <div class="layui-input-block">
                <textarea id="askAnswer"
                          name="data[askAnswer]">@if($info["type"]["choice_type"]==0){{$info["content"]["answer"][0]}}@endif</textarea>
            </div>
        </div>

        {{--变量题--}}
        <div id="calculation" style="display: @if($info["type"]["choice_type"]==6) block @else none @endif;">
            {{--变量组--}}

            @if($info["type"]["choice_type"]==6)
                @foreach($info["content"]["answer"]["x"] as $x)
                    <div class="variable-item">
                        <div class="layui-form-item" id="param_{{$loop->index+1}}">
                            <label class="layui-form-label">变量组{{$loop->index+1}}</label>
                            <div class="layui-input-block" style="width: 63.2%">
                                <input class="layui-input" name="data[X][]" value="{{implode(",",$x)}}"
                                       placeholder="变量组{{$loop->index+1}}"/>
                            </div>
                        </div>

                        <div class="conCalBtn" style="position: absolute;left: 71%;margin-top: -49px;">
                            <a class="layui-btn layui-btn-sm layui-btn-normal caladd" lay-submit="" lay-filter="caladd">添加</a>
                            <a class="layui-btn layui-btn-sm layui-btn-danger caldel" lay-submit="" lay-filter="caldel">删除</a>
                        </div>
                    </div>
                @endforeach
                <div id="result">

                    @foreach($info["content"]["answer"]["y"] as $y)
                        <div class="layui-form-item result-item">
                            <label class="layui-form-label">结果_{{$loop->index+1}}</label>
                            <div class="layui-input-block" style="width: 63.2%">
                                <input class="layui-input layui-input-inline" name="data[result][name][]"
                                       placeholder="请输入结果名称" value="{{$y['key']}}"/>
                                <input class="layui-input layui-input-inline" style="width: 66%"
                                       name="data[result][formula][]"
                                       placeholder="请输入公式" value="{{$y['y']}}"/>
                                <div class="layui-inline" style="width: 12%">
                                    <select class="point" name="data[result][decimals][]">
                                        <option @if($info["content"]["answer"]["d"][$loop->index]==-1) selected
                                                @endif value="-1">--保留小数--
                                        </option>
                                        @for($i=0;$i<10;$i++)
                                            <option @if($info["content"]["answer"]["d"][$loop->index]==$i) selected
                                                    @endif value="{{$i}}">{{$i}}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            <div style="position: absolute;left: 71%;margin-top: -35px;">
                                <a id="caladd" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit=""
                                   lay-filter="resadd">添加</a>
                                <a id="caldel" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit=""
                                   lay-filter="resdel">删除</a>
                            </div>
                        </div>
                    @endforeach


                </div>
            @else
                <div class="variable-item">
                    <div class="layui-form-item" id="param_1">
                        <label class="layui-form-label">变量组1</label>
                        <div class="layui-input-block" style="width: 63.2%">
                            <input class="layui-input" name="data[X][]" placeholder="变量组1"/>
                        </div>
                    </div>

                    <div class="conCalBtn" style="position: absolute;left: 71%;margin-top: -49px;">
                        <a class="layui-btn layui-btn-sm layui-btn-normal caladd" lay-submit=""
                           lay-filter="caladd">添加</a>
                        <a class="layui-btn layui-btn-sm layui-btn-danger caldel" lay-submit=""
                           lay-filter="caldel">删除</a>
                    </div>
                </div>

                <div id="result" class="result-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">结果_1</label>
                        <div class="layui-input-block" style="width: 63.2%">
                            <input class="layui-input layui-input-inline" name="data[result][name][]"
                                   placeholder="请输入结果名称"/>
                            <input class="layui-input layui-input-inline" style="width: 79%"
                                   name="data[result][formula][]"
                                   placeholder="请输入公式"/>
                        </div>
                        <div style="position: absolute;left: 71%;margin-top: -35px;">
                            <a id="caladd" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit=""
                               lay-filter="resadd">添加</a>
                            <a id="caldel" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit=""
                               lay-filter="resdel">删除</a>
                        </div>
                    </div>
                </div>
            @endif

            <div id="notice" class="layui-form-item" style="color: red">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <p>提示：一个变量组表示一个变量包含的多种值，请用英文逗号隔开</p>
                    <p>结果表示变量组中的多个值，通过计算得到的结果</p></div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">难度</label>
            <div class="layui-input-block" style="width: 46.7%;">
                @foreach($level as $l)
                    <input type="radio" name="data[level]" @if($l["value"]==$info["level"]) checked
                           @endif value="{{$l["value"]}}" title="{{$l["name"]}}">
                @endforeach
            </div>
        </div>
        {{--答案解析--}}
        <div class="layui-form-item">
            <label class="layui-form-label">解析</label>
            <div class="layui-input-block">
                <textarea id="explanation" name="data[explanation]">{{$info["content"]["explanation"]}}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn">立即提交</button>
                <button type="button" class="layui-btn layui-btn-normal"
                        onclick='window.location.href="javascript:history.go(-1)"'>返回
                </button>
            </div>
        </div>
    </form>
@endsection

@section('script')
    <script src="{{asset('layui/modules/xm-select.js')}}"></script>
    <script src="{{asset('js/tree/select.js')}}"></script>
    <script src="{{asset('vendor/ckeditor/ckeditor.js')}}"></script>
    <script src="{{asset('vendor/ckeditor/js/questionConfig.js')}}"></script>
    <script>
        var choice = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];//添加的选项
        var choiceIdx = '{{$info["type"]["choice_type"]<=3?count($info["content"]["answer"])-1:0}}';//选项下标序号
        var calIdx = '{{array_key_exists("x",$info["content"]["answer"])?count($info["content"]["answer"]["x"]):1}}';
        var resIdx = '{{array_key_exists("y",$info["content"]["answer"])?count($info["content"]["answer"]["y"]):1}}';
        const category = JSON.parse('{!! $categroy !!}');
        const category_id = "{{$info["category_id"]}}";
        const choiceType = {{$info["type"]["choice_type"]}};
        layui.use(['form', 'xmSelect'], function () {
            var form = layui.form,
                xmSelect = layui.xmSelect;

            let orgs = selectTreeParams('#org', 'data[org_id]', '请选择', "{{$info["org_id"]}}", JSON.parse('{!! $orgs !!}'), (res) => {
            });
            xmSelect.render(orgs);

            let type = selectTreeParams('#type', 'data[type_id]', '请选择', "{{$info["type_id"]}}", JSON.parse('{!! $types !!}'), (res) => {
                let choiceType = res.arr[0].choice_type
                //objective(1,2,3)  evaluate  4  directional 5  calculation 6
                if (choiceType < 5 && choiceType > 0) {
                    $("#objective").show()//type 1,2,3
                    $('#evaluate').hide()//type 4
                    $('#directional').hide()//type 4
                    $("#calculation").hide()//type 6

                    if (choiceType == 1) {
                        $('.answerAlone').show()
                        $('.answerMore').hide()
                    } else if (choiceType == 4) {
                        $('#evaluate').show()
                        $("#objective").hide()
                        $('.answerAlone').hide()
                        $('.answerMore').hide()
                    } else {
                        $('.answerAlone').hide()
                        $('.answerMore').show()
                    }
                } else if (choiceType == 6) {
                    $("#calculation").show();
                    $("#objective").hide()
                    $("#evaluate").hide()
                    $("#ask").hide()
                } else {
                    $("#objective").hide()
                    $("#calculation").hide()
                    $("#evaluate").hide()
                    if (choiceType == 5) {
                        $("#directional").show()
                        $("#ask").hide()
                    }
                    if (choiceType == 0) {
                        $("#directional").hide()
                        $("#ask").show()
                    }
                }
            });
            xmSelect.render(type);


            //科目分类及标签操作
            let categroy = selectTreeParams('#category', 'data[category_id]', '请选择', category_id, category, (res) => {
                //版本
                let versionDefault = __versionDefault(res.arr[0].version);
                let version = selectTreeParams('#version', 'data[version_id]', '请选择', versionDefault, res.arr[0].version, (res) => {
                }, 'version');
                xmSelect.render(version);
                //标签
                let tags = res.arr[0].exam_tag_group.length > 0 ? res.arr[0].exam_tag_group[0] : {tags: []}
                let tip = tags.hasOwnProperty("name") ? "--" + tags.name + "的标签--" : "--请选择--"
                let tag = selectTreeParams('#tag_id', 'data[tag_id]', tip, "", tags.tags, (res) => {
                })
                xmSelect.render(tag);
            });
            xmSelect.render(categroy);
            let versionData = [];
            let tags = [];
            //版本及标签
            category.forEach((item) => {
                if (item.id == category_id) {
                    versionData = item.version;
                    tags = item.exam_tag_group.length > 0 ? item.exam_tag_group[0].tags : [];
                }
            })
            //版本
            let version = selectTreeParams('#version', 'data[version_id]', '请选择', "{{$info["version_id"]}}", versionData, (res) => {
            }, 'version');
            xmSelect.render(version);
            //标签
            let tip = tags.hasOwnProperty("name") ? "--" + tags.name + "的标签--" : "--请选择--"
            let tag = selectTreeParams('#tag_id', 'data[tag_id]', tip, "{{$info["tag_id"]}}", tags, (res) => {
            })
            xmSelect.render(tag);

            //题干
            createEditor('question', 100);

            //解析
            createEditor('explanation', 100);

            //客观题的备选答案
            for (let i = choiceIdx; i >= 0; i--) {
                createEditor(choice[i], 100);
            }

            //问答提答案
            createEditor('askAnswer', 100);
            //客观题动态添加答案
            form.on('submit(add)', function () {
                choiceIdx >= 25 ? choiceIdx = 0 : choiceIdx++;
                let str = '<div class="obj-item">' +
                    '<div class="layui-form-item F' + choice[choiceIdx] + '">' +
                    '<label class="layui-form-label">选项 ' + choice[choiceIdx] + '</label>' +
                    '<div class="layui-input-block">' +
                    '<textarea id="' + choice[choiceIdx] + '" name="data[content][' + choice[choiceIdx] + ']"></textarea>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item answerAlone F' + choice[choiceIdx] + '">' +
                    '<label class="layui-form-label">正确答案</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="radio" name="data[oneAnswer]" value="' + choice[choiceIdx] + '" title="' + choice[choiceIdx] + '">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item answerMore F' + choice[choiceIdx] + '">' +
                    '<label class="layui-form-label">正确答案</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="checkbox" name="data[moreAnswer][]" value="' + choice[choiceIdx] + '" title="' + choice[choiceIdx] + '" lay-skin="primary">' +
                    '</div>' +
                    '</div>' +
                    '<div style="position: absolute;left: 71%;margin-top: -99px;">' +
                    '<a id="add" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="add">添加</a>' +
                    '<a class="layui-btn layui-btn-sm layui-btn-danger keguandel" lay-submit=""lay-filter="del">删除</a>' +
                    '</div>' +
                    '</div>'

                $(this).parent().parent().parent().append(str)
                $(this).remove()

                $('.answerAlone').is(':hidden') ? $('.answerAlone').hide() : $('.answerAlone').show()

                $('.answerMore').is(':hidden') ? $('.answerMore').hide() : $('.answerMore').show()

                //客观题的备选答案
                createEditor(choice[choiceIdx], 100);
                form.render();
            })

            form.on('submit(del)', function () {
                let curidx = $(".obj-item").index($(this).parents('.obj-item'))
                let len = $(".obj-item").length
                if (len > 1) {
                    $(this).parent().parent().remove()
                    if ((len - 1) == curidx) {

                        $(".keguandel").eq(curidx - 1).before('<a id="add" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="add">添加</a>')
                    }
                }
                if (len == 1) {
                    choiceIdx = 0;
                }
            })

            //监听计算题变量按钮
            //添加
            form.on('submit(caladd)', function () {
                calIdx++;
                let str = '<div class="variable-item">' +
                    '<div class="layui-form-item" id="param_' + calIdx + '">' +
                    '<label class="layui-form-label">变量组' + calIdx + '</label>' +
                    '<div class="layui-input-block" style="width: 63.2%">' +
                    '<input class="layui-input" name="data[X][]" placeholder="变量组' + calIdx + '"/>' +
                    '</div>' +
                    '</div>' +

                    '<div class="conCalBtn" style="position: absolute;left: 71%;margin-top: -49px;">' +
                    '<a class="layui-btn layui-btn-sm layui-btn-normal caladd" lay-submit="" lay-filter="caladd">添加</a>' +
                    '<a class="layui-btn layui-btn-sm layui-btn-danger caldel" lay-submit="" lay-filter="caldel">删除</a>' +
                    '</div>' +
                    '</div>'

                $("#result").before(str)
                form.render()
            })
            //删除
            form.on('submit(caldel)', function () {
                if ($('.variable-item').length > 1) {
                    $(this).parent().parent().remove()
                }
                if ($('.variable-item').length == 1) {
                    calIdx = 1;
                }
            })

            //监听计算题结果按钮
            //添加
            form.on('submit(resadd)', function () {
                resIdx++;
                let str1 =
                    '<div class="layui-form-item result-item">' +
                    '<label class="layui-form-label">结果_' + resIdx + '</label>' +
                    '<div class="layui-input-block" style="width: 63.2%">' +
                    '<input class="layui-input layui-input-inline" name="data[result][name][]" placeholder="请输入结果名称"/>' +
                    '<input class="layui-input layui-input-inline" style="width: 66%" name="data[result][formula][]" placeholder="请输入公式"/>' +
                    '<div class="layui-inline" style="width: 12%">' +
                    '    <select class="point" name="data[result][decimals][]">' +
                    '        <option value="-1">--保留小数--</option>'
                let str2 = ""
                for (let i = 0; i < 10; i++) {
                    str2 += '<option value="' + i + '">' + i + '</option>'
                }

                let str3 = '</select>' +
                    '</div>' +
                    '</div>' +
                    '<div style="position: absolute;left: 71%;margin-top: -35px;">' +
                    '<a class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="resadd">添加</a>' +
                    '<a class="layui-btn layui-btn-sm layui-btn-danger" lay-submit="" lay-filter="resdel">删除</a>' +
                    '</div>' +
                    '</div>'
                $(this).parent().parent().parent().append(str1 + str2 + str3)
                form.render()
            })
            //删除
            form.on('submit(resdel)', function () {
                if ($('.result-item').length > 1) {
                    $(this).parent().parent().remove()
                }
                if ($('.result-item').length == 1) {
                    resIdx = 1;
                }
            })
        });


        //默认版本
        function __versionDefault(versionData) {
            let versionDefault = "";
            if (versionData.length > 0) {
                versionData.forEach((item) => {
                    if (item.pivot.default == 1) {
                        versionDefault = item.pivot.version_id
                    }
                })
            }
            return versionDefault;
        }
    </script>
@endsection
